<%@ page import="java.util.List" %>
<%@ page import="java.util.Map" %>
<%@ page import="com.car.dao.DB" %>
<%@ page import="java.util.HashMap" %>
<%@ page import="javax.xml.namespace.QName" %><%--
  Created by IntelliJ IDEA.
  User: liqiansheng
  Date: 2021/4/1
  Time: 15:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>拼车信息</title>
    <%@include file="components/base.jsp" %>

</head>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=24661721a13ef054b221f80ab69b36e8"></script>
<style>


    #allmap {
        width: 500px;
        height: 400PX;
        overflow: hidden;
        vertical-align: middle;
    }

    #i_input {
        width: 550px;
        height: 50px;
    }

    .car {
        border-radius: 10px;
        padding: 20px;
        min-height: 450px;
        box-shadow: 0 0 10px 0 #ccc;
    }

    .right {
        width: 50%;
    }

    .right-1 div {
        display: inline-block;
    }
</style>
<%
    String id = request.getParameter("id");
    // 去数据库查出这条数据的详情
    List<Map<String, Object>> list = DB.executeQuery("select * from t_carpool where id = ?", id);//sql查出数据


%>
<body>
<%@include file="head.jsp" %>
<div style="display: flex">
    <div style="flex: 1"></div>
    <div class="car" style="flex: 8; ">
        <div>
            <div>
                <div>
                    <input style="display: inline-block;height: 30px; width: 200px" id="txtStart" type="text"
                           name="title" required
                           value="<%=list.get(0).get("becity")%>" lay-verify="required" placeholder="出发地"
                           autocomplete="off"
                           class="layui-input">
                    <input style="display: inline-block;height: 30px; width: 200px" id="txtEnd" type="text" name="title"
                           required
                           value="<%=list.get(0).get("decity")%>"
                           lay-verify="required" placeholder="目的地" autocomplete="off" class="layui-input">


                    <button onclick="history.go(0)" type="button" class="layui-btn layui-btn-sm layui-btn-primary">
                        <i class="layui-icon layui-icon-refresh"></i>
                    </button>
                </div>


            </div>

        </div>

        <div style="display: flex;margin-top: 20px">
            <div class="left">
                <div id="i_input">
                    <div id="allmap" style="border: 1px solid gray"></div>
                </div>
            </div>
            <div class="right">
                    <div class="layui-panel">
                        <form class="layui-form" action="<%= request.getContextPath()%>/join" method="post">
                            <div class="layui-form-item">
                                <div  style="display: inline-block" class="layui-inline">
                                    <label class="layui-form-label">出发地</label>
                                    <div class="layui-input-block">
                                        <input style="border: 0" value="<%=list.get(0).get("becity")%>" type="text" name="userName" required lay-verify="required"
                                               autocomplete="off" class="layui-input" readonly="readonly">
                                    </div>

                                </div>
                                <div  style="display: inline-block" class="layui-form-item">
                                    <label class="layui-form-label">目的地</label>
                                    <div class="layui-input-block">
                                        <input style="border: 0" value="<%=list.get(0).get("decity")%>" type="text" name="phone" required lay-verify="required"
                                               autocomplete="off" class="layui-input" readonly="">
                                    </div>

                                </div>
                                <div class="layui-form-item">
                                    <label  class="layui-form-label">出发时间</label>
                                    <div class="layui-input-block">
                                        <input style="border: 0" value="<%=list.get(0).get("deptime")%>" type="text" name="account" required lay-verify="required"
                                               autocomplete="off" class="layui-input" readonly="readonly">
                                    </div>

                                </div>

                                <hr class="layui-border-blue">

                                <div style="display: inline-block" class="layui-form-item">
                                    <label class="layui-form-label">容纳人数</label>
                                    <div class="layui-input-block">
                                        <input style="border: 0" value="<%=list.get(0).get("num_people")%>" type="text" name="account" required lay-verify="required"
                                               autocomplete="off" class="layui-input"readonly="readonly">
                                    </div>

                                </div>
                                <div style="display: inline-block" class="layui-form-item">
                                    <label class="layui-form-label">参与人数</label>
                                    <div class="layui-input-block">
                                        <input style="border: 0" value="<%=list.get(0).get("chek_people")%>" type="text" name="account" required lay-verify="required"
                                               autocomplete="off" class="layui-input"readonly="readonly">
                                    </div>
                                </div>

                                <div style="display: inline-block" class="layui-form-item">
                                    <label class="layui-form-label">汽车类型</label>
                                    <div class="layui-input-block">
                                        <input style="border: 0" value="<%=list.get(0).get("motor_type")%>"  type="text" name="account" required lay-verify="required"
                                               autocomplete="off" class="layui-input"readonly="readonly">
                                    </div>

                                </div>
                                <div style="display: inline-block" class="layui-form-item">
                                    <label class="layui-form-label">费用方式</label>
                                    <div class="layui-input-block">
                                        <input style="border: 0" value="<%=list.get(0).get("cost")%>" type="text" name="account" required lay-verify="required"
                                               autocomplete="off" class="layui-input"readonly="readonly">
                                    </div>

                                </div>


                                <div  class="layui-form-item">
                                    <label class="layui-form-label">留言</label>
                                    <div class="layui-input-block">
                                        <input style="border: 0" value="<%=list.get(0).get("remarks")%>" type="text" name="account" required lay-verify="required"
                                               autocomplete="off" class="layui-input"readonly="readonly">
                                    </div>

                                </div>

                            </div>

                            <div>
                                <div  style="margin-left: 250px" class="layui-form-item">
                                    <div class="layui-input-inline">
                                        <button class="layui-btn" lay-submit>加入拼车</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>




            </div>
        </div>

    </div>
    <div style="flex: 1"></div>
</div>
</body>
<script type="text/javascript" src="<%= request.getContextPath()%>/js/index.js">
</script>

</html>
